<template>
  <div class="content">
    <!-- 顶部搜索栏 -->
    <div class="top">
      <a-card :bordered="false">
        <a-space :size="30">
          <a-input-search
            v-model:value="status"
            style="width: 250px"
            placeholder="请输入用户状态"
            @search="likeSearch"
            size="large"
          >
            <template #enterButton>
              <a-button style="background-color: #409eff; color: white"
                >查询</a-button
              >
            </template>
          </a-input-search>
          <a-button type="primary" @click="resetParamr" ghost
            ><ReloadOutlined />重置</a-button
          >
        </a-space>
      </a-card>
    </div>

    <!-- 表格数据展示 -->
    <div class="table">
      <a-card :bordered="false">
        <div>
          <a-spin tip="加载中" :spinning="false">
            <a-table :data-source="data" :pagination="false" :loading="loading">
              <a-table-column
                fixed="left"
                key="avatar"
                title="头像"
                data-index="avatar"
              >
                <template #default="{ record }">
                  <a-image
                    :preview="false"
                    style="border-radius: 10%"
                    :width="50"
                    :src="record.avatar"
                  />
                </template>
              </a-table-column>
              <a-table-column
                fixed="left"
                key="userName"
                title="用户昵称"
                data-index="userName"
              />
              <a-table-column
                key="loginType"
                title="登录方式"
                data-index="loginType"
              >
                <template #default="{ record }">
                  <a-tag color="processing">
                    <span style="font-size: 13px">{{ record.loginType }}</span>
                  </a-tag>
                </template>
              </a-table-column>
              <a-table-column key="status" title="状态" data-index="status">
                <template #default="{ record }">
                  <a-tag :color="record.status === '在线' ? 'green' : 'red'">
                    <span style="font-size: 13px">{{ record.status }}</span>
                  </a-tag>
                </template>
              </a-table-column>
              <a-table-column fixed="right" key="id" title="操作">
                <template #default="{ record }">
                  <div style="display: flex">
                    <div style="margin-left: 10px">
                      <a-popconfirm
                        title="确认踢下线？"
                        ok-text="确认"
                        cancel-text="取消"
                        @confirm="remove(record.userId)"
                      >
                        <a-button
                          :disabled="record.status === '离线' ? true : false"
                          type="link"
                          ghost
                          danger
                        >
                          踢下线
                        </a-button>
                      </a-popconfirm>
                    </div>
                  </div>
                </template>
              </a-table-column>
            </a-table>
          </a-spin>
        </div>
        <!-- 分页 -->
        <div
          style="
            height: 40px;
            width: 100%;
            margin-top: 30px;
            display: flex;
            justify-content: center;
          "
        >
          <a-pagination
            v-model:current="pageNo"
            v-model:page-size="pageSize"
            :total="total"
            @change="handlePageChange"
            :show-total="(total) => `共 ${total} 条`"
          />
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import { list, offline } from "@/api/online";
import { useAdminStore } from "@/stores/admin";
const data = ref([{}]);

const loading = ref(true);
const adminStore = useAdminStore();
onMounted(() => {
  setTimeout(() => {
    getOnlines();
    loading.value = false;
  }, 800);
});

const total = ref(0);
const pageNo = ref(1);
const pageSize = ref(10);
const isAdmin = ref(false);
if (adminStore.admin.role === "管理员") {
  isAdmin.value = true;
}
//异步请求管理员数据
const status = ref("");
const online = ref({
  status: null
})
function getOnlines() {
  if (status.value === '在线') {
    online.value.status = 1;
  } else if (status.value === '离线') {
    online.value.status = 0;
  } else {
    online.value.status = null;
  }
  list(pageNo.value, pageSize.value,online.value).then((res) => {
    if (res.code === 200 && res.data != null) {
      data.value = res.data.data;
      total.value = res.data.total;
    }
  });
}

function likeSearch(searchValue) {
  status.value = searchValue;
  getOnlines();
}

//重置模糊查询数据
function resetParamr() {
  status.value = "";
   getOnlines();
}

//监听分页变化
function handlePageChange(param1, param2) {
  pageNo.value = param1;
  pageSize.value = param2;
  setTimeout(() => {}, 1000);
  getOnlines();
}

//管理员确认删除回调操作
function remove(userId) {
  offline(userId).then((res) => {
    if (res.code === 200) {
      message.success("成功踢下线！");
      getOnlines();
    }
  });
}
</script>

<style scoped>
.options {
  margin-top: 10px;
}

.table {
  margin-top: 10px;
}

.avatar-uploader > .ant-upload {
  width: 50px;
  height: 50px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.paginAtion {
  padding-top: 20px;
  padding-left: 310px;
  margin-bottom: 20px;
}
:deep(.ant-card-body) {
  padding: 10px;
}
</style>>